<script setup>
import { onMounted, ref, watch } from 'vue';

// import {getListApi} from '@/api/list'


  onMounted(async ()=> {
    console.log('挂载完毕, 获取数据A');
    // await getListApi()
  })

  console.log('执行了 onMounted 函数');

  const student = ref({
    name: 'tom',
    info: {
      age: 18,
      gender: '男'
    }
  })

  const changeName = () => {
    student.value.name = 'jack'
  }
  const changeAge = () => {
    student.value.info.age ++
  }

  // 监听一个复杂数据里面的属性(简单属性)
  watch(()=>student.value.name, () =>{
    console.log('名字发生改变');
  }),
  
  // 监听一个复杂数据里面的属性(复杂属性, 如对象套对象)
  watch(()=>student.value.info, () => {
    console.log('学生信息发生变化');
  }, {
    // 深度监听
    deep: true,
    // 立即执行
    immediate: true
  })

  // 这里准备写功能B, 又不想回到最上面将数据获取放在一起
  onMounted(()=>{
    console.log('这里是功能二定义的挂载生命周期, 获取数据B');
  })
</script>

<template>
  <div>{{ student.name }}, 是一位{{ student.info.gender }}生, 今年{{ student.info.age }}岁了</div>
  <button @click="changeName">改昵称</button>
  <button @click="changeAge">改年龄</button>
</template>

<style lang="scss" scoped></style>
